<template>
  <view>
    <radio-group @change="radioChange">
      <view class="item" v-for="(res, index) in siteList.list" :key="res.id">
        <radio :value="JSON.stringify(res)" :checked="res.addressId == store.checkedId" />
        <view style="flex-grow: 1">
          <view class="top">
            <view class="name">{{ res.userName }}</view>
            <view class="phone">{{ res.phone }}</view>
            <view class="tag">
              <text v-if="res.status == '1'" style="background-color: #f3af28">默认</text>
            </view>
          </view>
          <view class="bottom">
            {{ res.area }},{{ res.address }}
            <u-icon @click="update(res)" name="edit-pen" :size="40" color="#999999"></u-icon>
            <!-- 优化后的删除按钮 -->
            <view class="delete-button" @click="confirmDelete(res.addressId)">
              <u-icon name="trash" :size="30" color="white"></u-icon>
              <span>删除</span>
            </view>
          </view>
        </view>
      </view>
    </radio-group>
    <view class="addSite" @tap="toAddSite">
      <view class="add">
        <u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>
        新建收货地址
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { addressStore } from '../../store/address.js';
import { addressListApi, deleteAddressApi } from '../../api/user.js';

const store = addressStore();
// 地址数据
const siteList = reactive({
  list: []
});

// 查询地址数据
const getList = async () => {
  let res = await addressListApi({
    openid: uni.getStorageSync('openid')
  });
  console.log(res);
  if (res && res.code == 200) {
    siteList.list = res.data;
  }
};

// 跳转新增地址
const toAddSite = () => {
  uni.navigateTo({
    url: '../address/address'
  });
};

// 修改
const update = (item) => {
  console.log(item);
  uni.navigateTo({
    url: '../address/address?item=' + JSON.stringify(item)
  });
};

// 单选点击事件
const radioChange = (e) => {
  console.log(e);
  if (e.detail.value) {
    let item = JSON.parse(e.detail.value);
    store.checkedId = item.addressId;
    store.userName = item.userName;
    store.phone = item.phone;
    store.area = item.area;
    store.address = item.address;
    // 关闭页面
    uni.navigateBack();
  }
};

// 确认删除弹窗
const confirmDelete = async (addressId) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await deleteAddressApi(addressId);
          if (result && result.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            // 重新获取地址列表
            await getList();
          } else {
            uni.showToast({
              title: '删除失败',
              icon: 'none'
            });
          }
        } catch (error) {
          console.error('删除地址出错:', error);
          uni.showToast({
            title: '删除出错，请稍后重试',
            icon: 'none'
          });
        }
      }
    }
  });
};

onShow(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.item {
  padding: 40rpx 20rpx;
  display: flex;
  align-items: center;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;

    .phone {
      margin-left: 60rpx;
    }

    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;

      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(49, 145, 253);
      }

      .red {
        background-color: red;
      }
    }
  }

  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
    color: #999999;
  }
}

// 优化后的删除按钮样式
.delete-button {
  display: flex;
  align-items: center;
  background-color: #ff4d4f;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  cursor: pointer;
  margin-left: 20rpx;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #ff7875;
  }
}

.addSite {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 80rpx;
  background-color: #f3af28;
  border-radius: 60rpx;
  font-size: 30rpx;

  .add {
    display: flex;
    align-items: center;
    color: #ffffff;

    .icon {
      margin-right: 10rpx;
    }
  }
}
</style>
